<!--{= include ic/admin-header.html }-->

<div class="am-cf admin-main">
  <!--{= include ic/admin-sidebar.html }-->

  <!-- content start -->
  <div class="admin-content">
    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">模板管理</strong> / <small><!--{ if(result){ }-->编辑模板 - <!--{= result.get("name") }--><!--{ }else{ }-->新建模板<!--{ } }--></small></div>
    </div>
	
	<div class="am-padding-left"><!--{ if(result){ }--><!--{= result.get("cacheName") }-->.<!--{= result.get("type") }--><!--{ }else{ }-->NewTemplet<!--{ } }--></div>
    <hr style=" margin-top:0.5rem;" />
    <div class="am-u-sm-12 am-u-sm-centered">
		<link type="text/css" rel="stylesheet" href="/js/CodeMirror/codemirror.css"/>
		<link type="text/css" rel="stylesheet" href="/js/CodeMirror/hint/show-hint.css"/>
		<textarea id="data-htmlContent" style="height:40rem;" class="am-pre-scrollable"><!--{ if(result){ }--><!--{= result.get("htmlContent") }--><!--{ } }--></textarea>		
	</div>
	<hr />
	<div class="am-g-fixed am-cf am-padding-left am-padding-bottom">
		<form class="am-form am-u-sm-8 am-form-horizontal am-cf" id="my-form">
			<!--{ if(result){ }-->
				<input id="data-id" type="hidden" value="<!--{= result.id }-->">
			<!--{ } }-->
			<div class="am-form-group">
				<label for="data-name" class="am-u-sm-2 am-form-label">模板名</label>
				<div class="am-u-sm-10">
					<input type="text" id="data-name" value="<!--{ if(result){ }--><!--{= result.get("name") }--><!--{ } }-->" placeholder="2-20字符" data-foolish-msg="2-20字符的模板名" minlength="2" maxlength="20" required>
				</div>
			</div>

			<div class="am-form-group">
				<label for="data-cacheName" class="am-u-sm-2 am-form-label">标识</label>
				<div class="am-u-sm-10">
					<input type="text" id="data-cacheName" value="<!--{ if(result){ }--><!--{= result.get("cacheName") }--><!--{ } }-->" placeholder="模板标识（由英文、数字和下划线组成的唯一标识，长度2-32字符）"  minlength="2" maxlength="32" pattern="^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$" required>
				</div>
			</div>
			
			
			<div class="am-form-group" <!--{ if(!((result && result.get("type")=="html") || (!result && type=="html"))){ }-->style="display:none"<!--{ } }-->>
				<div class="am-u-sm-offset-2 am-u-sm-10">
					<div class="checkbox">
						<label>
							<input id="data-isForInclude" type="checkbox" <!--{ if(result && result.get("isForInclude") || (typeof(type)!="undefined" && (type=="js" || type=="css"))){ }-->checked<!--{ } }-->> 模块
						</label>
					</div>
				</div>
			</div>
			
			<div class="am-g">
				<div class="am-u-sm-offset-2 am-u-sm-3">
					<div class="am-btn am-btn-default" onclick="history.go(-1)">返回列表</div>
				</div>
				
				<div class="am-u-sm-offset-1 am-u-sm-3 am-u-end">
					<div class="am-btn am-btn-primary" onclick="saveEdit(<!--{ if(result){ }-->'<!--{= result.id }-->'<!--{ } }-->)">确认保存</div>
				</div>
			</div>
		</form>
	</div>
	<hr />
  </div>
  <!-- content end -->

</div>

<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<!--{= include ic/admin-footer.html }-->
<script type="text/javascript" src="/js/CodeMirror/codemirror.js"></script>
<script type="text/javascript" src="/js/CodeMirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="/js/CodeMirror/mode/css/css.js"></script>
<script type="text/javascript" src="/js/CodeMirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="/js/CodeMirror/hint/show-hint.js"></script>
<script type="text/javascript" src="/js/CodeMirror/hint/javascript-hint.js"></script>
<script type="text/javascript" src="/js/CodeMirror/mode/htmlmixed/htmlmixed.js"></script>

<script type="text/javascript">
<!--{ if((result && result.get("type")=="js") || (!result && type=="js")){ }-->
var editor 		= CodeMirror.fromTextArea($('#data-htmlContent')[0], {lineNumbers: true,mode: "javascript"});
<!--{ }else if((result && result.get("type")=="css") || (!result && type=="css")){ }-->
var editor 		= CodeMirror.fromTextArea($('#data-htmlContent')[0], {lineNumbers: true,mode: "text/css"});
<!--{ }else{ }-->
var editor 		= CodeMirror.fromTextArea($('#data-htmlContent')[0], {lineNumbers: true,mode: "htmlmixed"});
<!--{ } }-->
$(function(){
	$("#collapse-templet").addClass("am-in");
});
var validator 	= $('#my-form').validator({submit: function(e) {
	if(this.isFormValid()){
		$.AMUI.progress.start();
		var type='<!--{ if(result){ }--><!--{= result.get("type") }--><!--{ }else{ }--><!--{= type }--><!--{ } }-->';
		var isForInclude="";
		if($("#data-isForInclude").is("input:checked"))isForInclude=1;
		editor.save();
		$.post("save", {
			"ajax"			: true,
			"id"			: $('#data-id').val(), 
			"htmlContent"	: $.trim(editor.getTextArea().value), 
			"name"			: $('#data-name').val(), 
			"cacheName"		: $('#data-cacheName').val(), 
			"type"			: type, 
			"isForInclude"	: isForInclude
		},function(data){
			$.AMUI.progress.done();
			$("#btn-saveEdit").removeClass("am-disabled");
			if(typeof(data)=="object" && typeof(data.error)=="undefined"){
				mAlert({
					title:"提示",
					text:"保存成功！",
					onConfirm:function(e) {
						gotoUrl('list?type='+type);
					}
				});
			}else{
				console.dir(data);
				mAlert({
					title:"错误",
					text:data.error
				});
			}
		}, "json");
	}else{
		$("#btn-saveEdit").removeClass("am-disabled");
	}
	return false;
}});

function saveEdit(){
	$("#btn-saveEdit").addClass("am-disabled");
	validator.submit();
}
</script>